<template>
  <div class="vote">
    <vodal :width="6" :height="voteVodalHeight" measure="rem" :show="showVoteVodal" @hide="onVoteVodalHide" :closeButton="false">
      <h1 class="vote-header">
        <span>投票验证</span>
      </h1>
      <h2 class="vote-title">为企业助力品牌力量</h2>
      <div class="vote-img-vodal">
        <img :src="currentVoteBrand.img" alt="">
      </div>
      <div class="vote-ranking-name">
        <div class="vote-ranking-number" v-if="currentVoteBrand.ranking>3" :class="{'vote-ranking-number-10':currentVoteBrand.ranking<=10}">
          <div class="ranking-number">
            {{currentVoteBrand.ranking}}<span v-if="currentVoteBrand.ranking>10">.</span>
          </div>
        </div>
        <div v-else class="vote-ranking-number-img">
          <img src="../assets/trophy-1.png" alt="" v-if="currentVoteBrand.ranking===1">
          <img src="../assets/trophy-2.png" alt="" v-if="currentVoteBrand.ranking===2">
          <img src="../assets/trophy-3.png" alt="" v-if="currentVoteBrand.ranking===3">
        </div>
        <div class="vote-ranking-name-inner">{{currentVoteBrand.companyName}}</div>
      </div>
      <div class="vote-code-outter">
        <div class="vote-code-box">
          <input type="text" placeholder="请输入验证码" @focus="onInputFocus" @input="onInputChange" v-model.trim="voteCode" ref="voteCode" v-inputBlur>
          <img :src="imgCodeUrl" alt="" @click="changeCode">
        </div>
        <div class="code-tip-box clearfix">
          <div class="code-tip" v-show="showCodeSuccess">
            <img src="../assets/code-success.png" alt="">
            <span>验证码正确</span>
          </div>
          <div class="code-tip" v-show="showCodeFail">
            <img src="../assets/code-fail.png" alt="">
            <span>验证码错误</span>
          </div>
          <div class="change-code" @click="changeCode">
            看不清，换一张
          </div>
        </div>
        <div class="code-tip-text" v-show="codeTipText">{{codeTipText}}</div>
      </div>
      <div class="vote-btn-box">
        <div type="button" class="btn vote-cancel" @click="onVoteVodalHide">取消</div>
        <div type="button" class="btn vote-ok" @click="onVoteSubmit">投票</div>
      </div>
    </vodal>
    <div class="vote-tips">
      <vodal :width="6" :height="9.5" measure="rem" :show="showTipVodal" @hide="onTipVodalHide" :closeButton="false">
        <div class="tip-vodal-container">
          <div class="tip-vodal-content">
            <div class="vodal-title">
              <img src="../assets/vodal-left-icon.png" alt="">
              <span>规则提示</span>
              <img src="../assets/vodal-right-icon.png" alt="">
            </div>
            <div class="vote-tips">
              <img src="../assets/vote-tips-icon.png" alt="">
              <span>{{errorTipText}}</span>
            </div>
            <div class="vote-tips" v-if="errorTextFlag">休息一下吧！</div>
            <div class="code-box">
              <img :src="xcxLink" alt="">
              <div class="code-tips">
                <p class="code-tips-title">偷偷告诉您 </p>
                <p class="code-tips-content">品牌中网 小程序 也可以投票了！</p>
              </div>
            </div>
          </div>
          <div class="vote-tips-close" @click="onTipVodalHide">
            <img src="../assets/vote-tips-close.png" alt="">
          </div>
        </div>
      </vodal>
    </div>
    <vodal :width="6" :height="successVodalHeight" measure="rem" :show="showFinishVodal" @hide="onFinishVodal" :closeButton="false">
      <VoteSuccess :votes="voteCount" :img="currentVoteBrand.img" :ranking="ranking" :name="currentVoteBrand.companyName" :catName="catName" :voteTime="voteTime" :catid="catid"></VoteSuccess>
      <div class="vote-success-close" @click="onFinishVodal">
        <img src="../assets/vote-success-close.png" alt="">
      </div>
    </vodal>
  </div>
</template>

<script>
let socket
import consts from '../../../common/consts'
import jsonp from 'jsonp'
import VoteSuccess from './VoteSuccess'
import * as events from '../../../store/events'
import { getInfoCookie, paddingZero } from '../../../common/utils'
import scroll from '../../../mixins/scroll'
import * as wx from '../../../common/wxShare'
import { mapState } from 'vuex'

let socketIP = consts.socketIP

export default {
  mixins: [scroll],
  components: {
    VoteSuccess
  },
  data() {
    return {
      voteCount: 0, // 当前票数
      ranking: 0, //当前排名
      showVoteVodal: false, // 是否显示投票弹窗
      currentVoteBrand: {
        img: '',
        ranking: 0,
        id: '',
        companyName: '',
        t_catid: '',
        t_itemid: ''
      },
      voteCode: '',
      catid: '',
      catName: '',
      captchaType: 0,
      timeType: 0,
      codeTipText: '',
      tokenVal: '', // 从cookie里拿出的token
      ouidVal: '', // 从cookie里拿出的ouidVal
      rndNum: '', // 用来获取验证码的随机数
      imgCodeUrl: '', // 图片验证码的url,
      showCodeSuccess: false, // 图片验证码成功提示
      showCodeFail: false, // 图片验证码失败提示
      // 提示弹窗内容
      errorTipText: '',
      // 固定提示文字
      errorTextFlag: false,
      showTipVodal: false,
      // 投票成功弹出框
      showFinishVodal: false,
      voteTime: '', // 投票时间
    }
  },
  // todo 投票成功后通知index页面
  computed: {
    ...mapState({
      xcxLink: s => s.xcxLink
    }),
    captchaVal() {
      return this.voteCode.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '')
      // return this.voteCode.replace(/\s+/g, '')
    },
    voteVodalHeight() {
      if (this.currentVoteBrand.companyName.length <= 12) {
        return 7.8
      } else if (this.currentVoteBrand.companyName.length <= 24) {
        return 8.1
      } else {
        return 8.4
      }
    },
    successVodalHeight() {
      if (this.currentVoteBrand.companyName.length <= 12) {
        return 8.1
      } else if (this.currentVoteBrand.companyName.length <= 24) {
        return 8.4
      } else {
        return 8.7
      }
    }
  },
  methods: {
    // 投票流程从这里开始
    acceptVoteData(voteItem, data) {
      // 每次点立即投票的时候重置socket 以便再次连接
      socket = undefined
      // 外面带过来的数据赋值 
      this.currentVoteBrand.img = voteItem.thumb
      this.currentVoteBrand.ranking = parseInt(voteItem.ranking)
      this.currentVoteBrand.id = voteItem.itemid
      this.currentVoteBrand.companyName = voteItem.title
      this.currentVoteBrand.t_catid = voteItem.t_catid
      this.currentVoteBrand.t_itemid = voteItem.t_itemid
      this.catid = data.catid
      this.catName = data.catName
      this.captchaType = data.captchaType
      this.timeType = data.timeType
      this.showCodeSuccess = false
      this.showCodeFail = false
      this.codeTipText = ''
      this.checkTime()
    },
    // 检查本地储存的时间
    checkTime() {
      const voteTime = window.localStorage.getItem(this.catid + 'VoteTime')
      if (voteTime) {
        const now = Date.now() / 1000
        let nextVoteTime = parseInt(voteTime) + 1800 * this.timeType + 60
        if (nextVoteTime > now) { // 时间还没到 还不可以投票
          this.showNextVoteTip()
        } else {
          window.localStorage.removeItem(this.catid + 'VoteTime')
          this.chooseVoteType()
        }
      } else {
        this.chooseVoteType()
      }
    },
    showNextVoteTip() {
      if (this.timeType === 1 || this.timeType === 2) {
        let nextVoteTime = window.localStorage.getItem(this.catid + 'VoteTime')
        nextVoteTime = parseInt(nextVoteTime) + 1800 * this.timeType + 60 // 时间间隔 timeType1为30分钟 2为60分钟
        const nextVoteDate = new Date(nextVoteTime * 1000)
        const h = paddingZero(nextVoteDate.getHours())
        const m = paddingZero(nextVoteDate.getMinutes())
        nextVoteTime = h + ':' + m
        if (parseInt(h) === 0) {
          this.errorTipText = '时间不够啦，请明天再来吧!'
          this.errorTextFlag = true
        } else {
          this.errorTipText = nextVoteTime + '可以继续投票'
          this.errorTextFlag = true
        }
      } else if (this.timeType === 3) {
        this.errorTipText = '明天可继续投票!'
        this.errorTextFlag = true
      } else if (this.timeType === 4) {
        this.errorTipText = '本期活动投票次数已用完!'
        this.errorTextFlag = true
      }
      this.showTipVodal = true
      this.scroll(false)
    },
    // 开始区分是有验证码投票还是无验证码投票
    chooseVoteType() {
      if (this.captchaType === 6) {
        this.voteWithoutCode()
      } else {
        this.voteWithCode()
      }
    },
    // 无验证码投票
    voteWithoutCode() {
      if (socket === undefined || socket.readyState !== 1) {
        socket = new WebSocket('ws://' + socketIP + ':8008')
        socket.binaryType = 'arraybuffer'
        socket.onmessage = (msg) => {
          const resulte = this.parseSocketData(msg.data)
          const action = resulte.action
          const val = resulte.msg
          switch (action) {
            case 'wait':
              const userInfo = getInfoCookie()
              this.tokenVal = userInfo.token
              this.ouidVal = userInfo.uid
              this.sendVoteWithoutCode()
              break
            case 'auth':
              this.sendData('auth', eval(val))
              break
            case 'vote':
              this.voteSuccess(val)
              break
          }
        }
        socket.onopen = () => {
          this.sendData('auth', this.captchaType)
        }
      }
    },
    // 无验证码投票正式发送socket
    sendVoteWithoutCode() {
      this.sendData('vote', JSON.stringify({
        itemid: this.currentVoteBrand.t_itemid,
        catid: this.currentVoteBrand.t_catid,
        auth: this.captchaType,
        token: this.tokenVal,
        ouid: this.ouidVal
      }))
    },
    // 有验证码投票
    voteWithCode() {
      // 显示验证码弹窗
      this.showVoteVodal = true
      this.scroll(false)
      this.voteCode = ''
      // 获取验证码图片
      this.getCodeImage()
    },
    // 输入框获取焦点 开始连接socke
    onInputFocus() {
      if (socket === undefined || socket.readyState !== 1) {
        socket = new WebSocket('ws://' + socketIP + ':8008')
        socket.binaryType = 'arraybuffer'
        socket.onmessage = (msg) => {
          const resulte = this.parseSocketData(msg.data)
          const action = resulte.action
          const val = resulte.msg
          switch (action) {
            case 'auth':
              this.sendData('auth', eval(val))
              break
            case 'vote':
              this.voteSuccess(val)
              break
          }
        }
        socket.onopen = () => {
          this.sendData('auth', this.captchaType)
        }
      }
    },
    // 在input框变化时 提前验证验证码是否正确
    onInputChange() {
      this.voteCode = this.voteCode.replace(/\s+/g, '')
      if (this.voteCode.length > 4) {
        this.voteCode = this.voteCode.substr(0, 4)
      }
      if (this.voteCode.length === 4) {
        const params = 'captcha=' + this.captchaVal + '&rnd=' + this.rndNum + '&authType=' + this.captchaType + '&id=' + this.currentVoteBrand.t_itemid

        jsonp('http://' + socketIP + '/api/captcha.check.php?' + params, {
          name: '_checkcaptcha',
          prefix: '',
          param: 'callbackparam'
        }, (err, data) => {
          // console.log(111 + data)
          if (err) {
            console.log(err)
          } else {
            // data为0  表示成功
            if (parseInt(data) === 0 && this.captchaVal.length === 4) {
              // 正确 提示
              this.showCodeSuccess = true
              this.showCodeFail = false
              this.codeTipText = ''
            } else if (parseInt(data) === 2 && this.captchaVal.length === 4) {
              this.codeTipText = '验证码已过期，请重新输入！'
              this.showCodeSuccess = false
              this.showCodeFail = false
              this.getCodeImage() // 获取图片验证码
              this.voteCode = ''
            } else {
              // 失败
              // 显示验证码不正确
              this.showCodeFail = true
              this.showCodeSuccess = false
              this.codeTipText = ''
              return
            }
          }
        })
      } else if (this.captchaVal.length > 4) {
        // 提示验证码不正确
        this.showCodeSuccess = false
        this.showCodeFail = true
      } else {
        this.showCodeSuccess = false
      }
    },
    // 点击投票按钮回调
    onVoteSubmit() {
      // 预验证不正确 直接返回
      if (!this.showCodeSuccess) {
        this.showCodeFail = true
        return
      }
      // 输入的验证码不到4位 直接显示验证码错误
      if (this.captchaVal.length !== 4) {
        this.showCodeFail = true
        this.showCodeSuccess = false
        this.voteCode = ''
        this.getCodeImage()
        return
      }
      const params = 'captcha=' + this.captchaVal + '&rnd=' + this.rndNum + '&authType=' + this.captchaType + '&id=' + this.currentVoteBrand.t_itemid

      jsonp('http://' + socketIP + '/api/captcha.check.php?' + params, {
        name: '_checkcaptcha',
        prefix: '',
        param: 'callbackparam'
      }, (err, data) => {
        if (err) {
          console.log(err)
        } else {
          // data为0  表示成功
          if (parseInt(data) === 0) {
            const userInfo = getInfoCookie()
            this.tokenVal = userInfo.token
            this.ouidVal = userInfo.uid
            this.showVoteVodal = false
            this.scroll(true)
            this.showCodeSuccess = false
            this.sendVoteWithCode()
          } else if (parseInt(data) === 2 && this.captchaVal.length === 4) {
            this.codeTipText = '验证码已过期，请重新输入！'
            this.showCodeSuccess = false
            this.showCodeFail = false
            this.getCodeImage() // 获取图片验证码
            this.voteCode = ''
          } else {
            // 失败
            this.voteCode = ''
            this.getCodeImage()
            // 显示验证码不正确 
            this.showCodeSuccess = false
            this.showCodeFail = true
            this.codeTipText = ''
            return
          }
        }
      })
    },
    // 有验证码投票正式发送socket
    sendVoteWithCode() {
      this.sendData('vote', JSON.stringify({
        itemid: this.currentVoteBrand.t_itemid,
        catid: this.currentVoteBrand.t_catid,
        captcha: this.uniencode(this.captchaVal),
        auth: this.captchaType,
        rnd: this.rndNum,
        token: this.tokenVal,
        ouid: this.ouidVal
      }))
    },
    // 投票成功回调
    voteSuccess(result) {
      const resultArr = result.split(',')
      const code = resultArr[0]
      // 投票成功
      if (code === 'ok') {
        this.voteCount = resultArr[1]
        let successTime = resultArr[2].replace(/-/g, '/')
        this.voteTime = successTime
        successTime = new Date(successTime)
        successTime = successTime.getTime() / 1000
        window.localStorage.setItem(this.catid + 'VoteTime', successTime)
        // 把投票的品牌信息存到store中
        this.$store.commit(events.SET_SHARE_DATA, {
          companyName: this.currentVoteBrand.companyName,
          img: this.currentVoteBrand.img
        })
        wx.clearVotedShareData()
        this.getNewRanking()
      } else {
        // 投票出错 错误处理
        switch (code) {
          case 'no':
            this.codeTipText = '验证码已过期，请重新输入！'
            this.getCodeImage() // 获取图片验证码
            this.voteCode = ''
            this.showCodeSuccess = false
            this.showCodeFail = false
            this.showVoteVodal = true
            this.scroll(false)
            break
          case 'no55':
            this.errorTipText = '投票太频繁，请稍后再试！'
            break
          case 'no71':
          case 'no72':
          case 'no74':
            this.errorTipText = '您的缓存太多了，请清理您的微信缓存！'
            break
          case 'no73':
            this.errorTipText = '失败了，请重新尝试！'
            break
          case 'no75':
            this.errorTipText = '信息异常，请联系客服！'
            break
          case 'no76':
            this.errorTipText = '投票失败，请稍后再尝试！'
            break
          case 'no91':
            this.errorTipText = '投票太频繁，每位用户30分钟内只能投一票，请稍后再试！'
            break
          case 'no92':
            this.errorTipText = '投票太频繁，每位用户60分钟内只能投一票，请稍后再试！'
            break
          case 'no93':
            this.errorTipText = '投票太频繁，每位用户每天只能投一票，请明天再试！'
            break
          case 'no94':
            this.errorTipText = '投票太频繁，每位用户活动期间只能投一票！'
            break
          case 'no8':
            this.errorTipText = '活动即将开始，请耐心等待！'
            break
          case 'no9':
            this.errorTipText =
              '您该休息了，现在是睡眠时间【00：00—07：00】请7点后再投！'
            break
          case 'ref':
            window.location = window.location
            break
          default:
            this.errorTipText = '投票失败，可能是网络异常，请稍后再试！'
        }
        if (code !== 'no') {
          this.showTipVodal = true
          this.scroll(false)
        }
      }
    },
    // 投票成功后获取新的排名
    getNewRanking() {
      this.$api.getBrandDetail(this.catid, {
        itemid: this.currentVoteBrand.id
      }).then(data => {
        if (parseInt(data.data.status) === 1) {
          this.ranking = parseInt(data.data.info.ranking)
          // 显示投票成功框
          this.showFinishVodal = true
          this.scroll(false)
          // 通知index页面投票成功
          this.$emit('voted')
        } else {
          this.$toast.center(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 解析socket数据的方法
    parseSocketData(data) {
      let resulte = {}
      if (data instanceof ArrayBuffer) {
        const arr = new Uint8Array(data)
        const strArr = new Array()
        for (let i = 0; i < arr.length; i++) {
          strArr[i] = String.fromCharCode(arr[i])
        }
        const dataStr = strArr.join('')
        resulte = JSON.parse(dataStr)
      }
      return resulte
    },
    // 发送socket数据
    sendData(action, val) {
      // console.log(action, val)
      if (socket && socket.readyState == 1) {
        let arr = JSON.stringify({
          action: action,
          val: val
        }).split('')
        let strArr = new Array()
        for (let i = 0; i < arr.length; i++) {
          strArr[i] = arr[i].charCodeAt()
        }
        let data = new Uint8Array(strArr)
        socket.send(data.buffer)
      } else {
        // console.log(socket.readyState)
      }
    },
    // 换一张验证码
    changeCode() {
      this.voteCode = ''
      this.showCodeSuccess = false
      this.showCodeFail = false
      this.codeTipText = ''
      this.getCodeImage()
      // this.$refs.voteCode.focus()
    },
    // 获取图片验证码
    getCodeImage() {
      this.rndNum = this.getRndNum()
      this.imgCodeUrl = 'http://' + socketIP + '/api/captcha.png.php?authType=' + this.captchaType + '&rnd=' + this.rndNum + '&id=' + this.currentVoteBrand.t_itemid + '&outb=0'
    },
    //获取随机数
    getRndNum() {
      return '' + this.currentVoteBrand.t_catid + this.currentVoteBrand.t_itemid + Math.round(Math.random() * 100000)
    },
    // 设置分享url
    setUrl() {
      let LocUrl = location.href;
      let code = this.$route.query.catid
      if (code) {
        let imgUrl = window.location.href
        let urlA = imgUrl.indexOf('&code=')
        let urlB = imgUrl.substring(0, urlA)
        this.urlData = urlB
      } else {
        this.urlData = LocUrl
      }
    },
    // 验证码转码
    uniencode(text) {
      text = escape(text.toString()).replace(/\+/g, '%2B')
      let matches = text.match(/(%([0-9A-F]{2}))/gi)
      if (matches) {
        for (var matchid = 0; matchid < matches.length; matchid++) {
          let code = matches[matchid].substring(1, 3)
          if (parseInt(code, 16) >= 128) {
            text = text.replace(matches[matchid], '%u00' + code)
          }
        }
      }
      text = text.replace('%25', '%u0025')
      return text
    },
    onVoteVodalHide() {
      this.showVoteVodal = false
      this.scroll(true)
    },
    onTipVodalHide() {
      this.errorTextFlag = false
      this.showTipVodal = false
      this.scroll(true)
    },
    onFinishVodal() {
      this.showFinishVodal = false
      this.scroll(true)
    }
  }
}
</script>

<style scoped lang="scss">
.vote-header {
  position: relative;
  padding-top: 0.4rem;
  width: 4.5rem;
  margin: auto;
  text-align: center;
  span {
    display: inline-block;
    position: relative;
    z-index: 2;
    font-size: 0.32rem;
    color: #333;
    font-weight: 700;
    padding: 0 0.42rem;
    background-color: #fff;
  }
  &::after {
    content: "";
    width: 4.5rem;
    height: 1px;
    background-color: #dfdfdf;
    transform: scaleY(0.5);
    position: absolute;
    left: 0;
    top: 0.8rem;
  }
}
.tip-vodal-container {
  .tip-vodal-content {
    width: 6rem;
    height: 8.08rem;
    background: url("../assets/tips-bg.png") center no-repeat;
    background-size: cover;
    padding-top: 2.33rem;
    position: relative;
    .vodal-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.7rem;
      img {
        width: 0.76rem;
        height: 0.28rem;
      }
      span {
        margin: 0 0.28rem;
        font-size: 0.36rem;
        font-weight: bold;
        color: rgba(84, 81, 75, 1);
      }
    }
    .vote-tips {
      font-size: 0.32rem;
      line-height: 0.46rem;
      font-weight: bold;
      color: rgba(204, 59, 2, 1);
      text-align: center;
      padding: 0 0.5rem;
      img {
        width: 0.26rem;
        height: 0.26rem;
        margin-right: 0.1rem;
      }
    }
    .code-box {
      width: 5rem;
      height: 2.5rem;
      background: rgba(244, 231, 206, 1);
      border-radius: 0.2rem;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.5rem;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      .code-tips {
        margin-left: 0.3rem;
        width: 2.1rem;
        .code-tips-title {
          font-size: 0.26rem;
          line-height: 0.4rem;
          color: rgba(153, 153, 153, 1);
        }
        .code-tips-content {
          margin-top: 0.36rem;
          font-size: 0.28rem;
          line-height: 0.4rem;
          font-weight: bold;
          color: rgba(185, 123, 30, 1);
        }
      }
      img {
        width: 1.7rem;
        height: 1.7rem;
      }
    }
  }
  .vote-tips-close {
    width: 0.8rem;
    height: 0.8rem;
    margin: 0.6rem auto 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// .tip-vodal-content {
//   position: relative;
//   height: 100%;
//   p {
//     width: 4.66rem;
//     margin: 0 auto;
//     padding: 0.5rem 0;
//     font-size: 0.26rem;
//     color: #999;
//     text-align: center;
//   }
//   .tip-vodal-btn-box {
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     width: 100%;
//     border-top: 1px solid #ccc;
//     text-align: center;
//     height: 0.87rem;
//     line-height: 0.87rem;
//     font-size: 0.3rem;
//     color: #333;
//   }
// }
.vote-title {
  font-size: 0.34rem;
  text-align: center;
  color: #dcc459;
  margin-top: 0.3rem;
}
.vote-img-vodal {
  width: 100%;
  margin: 0.3rem auto;
  text-align: center;
  img {
    width: auto;
    height: 1.4rem;
  }
}
.vote-ranking-name {
  text-align: center;
  .vote-ranking-number-img {
    display: inline-block;
    vertical-align: middle;
    img {
      height: 0.37rem;
      width: auto;
      vertical-align: middle;
    }
  }
  .vote-ranking-name-inner {
    max-width: 4.5rem;
    display: inline-block;
    font-size: 0.36rem;
    line-height: 0.45rem;
    color: #444;
    font-weight: 700;
    margin-left: 0.2rem;
    vertical-align: middle;
    text-align: left;
  }
  .vote-ranking-number {
    display: inline-block;
    font-size: 0.72rem;
    line-height: 0.72;
    color: #444;
    vertical-align: bottom;
    font-weight: 700;
    vertical-align: middle;
    position: relative;
    &.vote-ranking-number-10 {
      width: 0.45rem;
      height: 0.45rem;
      // line-height: 0.45rem;
      text-align: center;
      background: url(../../../assets/img/vote-ranking-bg.png) center no-repeat;
      background-size: cover;
      color: #7c501e;
    }
    .ranking-number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5);
    }
  }
}
.vote-code-outter {
  position: absolute;
  bottom: 0.88rem;
  width: 100%;
  height: 1.8rem;
}
.vote-code-box {
  width: 4.6rem;
  height: 0.9rem;
  line-height: 0.9rem;
  margin: 0 auto 0 auto;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dcdcdc;
  img {
    min-width: 1.6rem;
    max-width: 1.6rem;
    height: 0.68rem;
    padding-left: 0.13rem;
    border-left: 1px solid #dcdcdc;
  }
  input {
    font-size: 0.24rem;
    padding-left: 0.19rem;
    max-width: 2rem;
  }
}
.code-tip-box {
  width: 4.6rem;
  margin: 0.11rem auto 0 auto;
  .change-code {
    float: right;
    font-size: 0.24rem;
    color: #2475fa;
    margin-right: 0.11rem;
  }
  .code-tip {
    float: left;
    margin-left: 0.11rem;
    img {
      width: 0.24rem;
      height: 0.24rem;
      vertical-align: middle;
    }
    span {
      margin-left: 0.2rem;
      font-size: 0.24rem;
      vertical-align: middle;
    }
  }
}
.code-tip-text {
  width: 4.6rem;
  margin: 0.1rem auto;
  font-size: 0.24rem;
  color: red;
}
.vote-btn-box {
  position: absolute;
  width: 100%;
  height: 0.87rem;
  line-height: 0.87rem;
  left: 0;
  bottom: 0;
  font-size: 0.3rem;
  border-top: 1px solid #ccc;
  .btn {
    width: 50%;
    height: 0.54rem;
    line-height: 0.54rem;
    font-size: 0.3rem;
  }
  .vote-cancel {
    color: #666;
    border-right: 1px solid #ccc;
  }
  .vote-ok {
    color: #333;
  }
}
.vote-success-close {
  text-align: center;
  margin-top: 0.5rem;
  img {
    width: 0.86rem;
    height: auto;
  }
}
</style>
<style>
.vote-tips .vodal-dialog {
  background: none;
  box-shadow: none;
}
</style>

